<template>  
	<div>
		<head-top></head-top>
		<div class="boxWrap">	
			<div class="alert alert-danger text-center" v-if="tipError" style="background-color: #f2dede;">
				<a href="#" class="close" data-dismiss="alert">&times;</a>
				<strong>{{errorReportTip}}</strong>
			</div>
			<div class="reporterWrap" style="padding-bottom:16px;">
				<div class="col-sm-12 report_header">
					<div class="text-left">
						<img src="../../assets/img/visualization.svg" alt="img">						
						<h5>数据基本分析</h5>					
					</div>
				</div>
			</div>
		</div>		
		<div class="col-sm-12 text-left report_words">
			<p class="reporterWrap text-center">					
				数据基本分析展示了数据本身基本的统计学性质，包括最大、最小值，不同分位数，平均值，标准差等。我们针对数据特点，通过可视化的方式更直观地展示了数据的特征情况。
			</p>
		</div>
		<div class="boxWrap col-sm-12">			
			<div class="reporterWrap">			
				<div v-for="all_table_item in all_table">
					<p class="tableName text-left">{{all_table_item.name}}</p>
					<reporter-table :reportType="report_type_val" :idTransfer="id_transfer_val" :nodeId="node_id_val" :table_header="all_table_item.headers" :table_value="all_table_item.values"></reporter-table>
				</div>
				<div class="col-sm-12 notShowChart">
					<p class="text-left tableName">数据可视化</p>
					<div class="col-sm-6">	
						<p class="text-center font16">数据直方图</p>
						<p class="text-center" style="margin:10px 0;">通过Y轴的下拉框选择不同数据列，可查看每列数据的分布情况。</p>
						<p class="text-left">				
							<select name="changeHist" @change="changeHist()" v-model="selected" class="selectStyle">
								<option :value="index" v-for="(item,index) in hisColumns">{{item}}</option>
							</select>
						</p>						
						<div id="hisChart" :style="{width: '520px', height: '380px',border:'1px solid #ccc'}"></div>
					</div>
					<div class="col-sm-6">	
						<p class="text-center font16">数据散点图</p>
						<p class="text-center" style="margin:10px 0;">通过X轴、Y轴的下拉框选择不同数据列，可查看选中列数据之间的相关关系。</p>
						<scatter :reportType="report_type_val" :idTransfer="id_transfer_val" :nodeId="node_id_val"></scatter>
					</div>
				</div>
			</div>
		</div>
		<footerHtml></footerHtml>
		<!--遮罩层和loading-->
		<div id="mask" v-show="seen" :style="{height: relHeight}"></div>
		<img src="../../assets/img/loading.gif" alt="loading" class="loading_img" v-if="loading"/>
	</div>
   
</template> 

<script>
	//引入公共模块
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	import scatter from '@/components/scatter'
	import reporterTable from '@/components/reporterTable'
	import {urlGetReporter} from '../../api/api'
	
	export default {	   
	     data(){
	    	return {
	    		seen:false,
	    		loading:false,
	    		relHeight:'',
	    		report_type_val:0,
	    		node_id_val:this.$route.params.node,
	    		id_transfer_val:this.$route.params.id,
	    		all_table:[],
	      		histogram_data:'',
	      		option:null,
	      		hisChart:null,
	      		data:'',
	      		hisColumns:'',
	      		selected:'0',
	      		newResData:'',
	      		tipError:false,
    			errorReportTip:'',
	    	}
	    },
	     components:{
	    	headTop,
	    	footerHtml,
	    	scatter,
	    	reporterTable
	    },  
	    beforeCreate:function(){
	    	this.$nextTick(function () {
		      this.seen=true;
		      this.loading=true;
		    })
	    },
	    mounted(){	
	    	this.relHeight=`${document.documentElement.scrollHeight}px`;
    		let sendData={
		  		report_type:0,
		  		id:this.$route.params.id,	
		  		node_id:this.$route.params.node,
		  		index_x:-1,
		  		index_y:-1		  		
			};
			urlGetReporter(sendData).then(response => {				
				this.seen=false;
	    		this.loading=false;
	 			if(response.data.code==200){
	 				// 错误类型(0:没有错误数据 1:有错误数据)
	 				if(response.data.data.invalid_type==1){
	 					$('.notShowChart').hide();
	 					this.tipError=true;
			 			this.errorReportTip=response.data.message;
	 				}
	 				this.newResData=response.data.data;
	 				let _self=this;
					$(response.data.data.details).each(function(i, v){	
		              	$(v.details).each(function(i_son, v_son){	
		              		if(v_son.type==0){
								_self.all_table.push(v_son.details);		
							}
			              	if(v_son.type==1){
								_self.hisColumns=v_son.details.columns;		
								//接收直方图数据
								_self.histogram_data=v_son.details.hist_data[0];
								_self.drawHistogram(_self.histogram_data);
								
			              	};
			            });
		           });	
	 			}else if(response.data.code==201){    				
	 				console.log('服务器返回数据失败')
	 			}		
	     	}).catch(error => {
				if(error.response.data.code==401){
            		localStorage.clear();
            		this.$router.replace('/login');
				}
            });
	    },
	    methods:{	    	
			renderItemFn(params, api) {
			    var yValue = api.value(2);
			    var start = api.coord([api.value(0), yValue]);
			    var size = api.size([api.value(1) - api.value(0), yValue]);
			    var style = api.style();
			
			    return {
			        type: 'rect',
			        shape: {
			            x: start[0] + 1,
			            y: start[1],
			            width: size[0] - 2,
			            height: size[1]
			        },
			        style: style
			    };
			},
	    	drawHistogram(resData){
	    		this.hisChart = echarts.init(document.querySelector('#hisChart'))
	    		var girth =resData;

				// See https://github.com/ecomfe/echarts-stat
				var bins = ecStat.histogram(girth);
				
				var interval;
				var min = Infinity;
				var max = -Infinity;
				
				this.data = echarts.util.map(bins.data, function (item, index) {
				    var x0 = bins.bins[index].x0;
				    var x1 = bins.bins[index].x1;
				    interval = x1 - x0;
				    min = Math.min(min, x0);
				    max = Math.max(max, x1);
				    return [x0, x1, item[1]];
				});
			    this.hisChart.setOption({
			    	title: {
				        text: 'histogram',
				        subtext:'histogram',
//				        sublink: 'https://github.com/ecomfe/echarts-stat',
				        left: 'center',
				        top: 10
				    },
				    color: ['#126DFF'],
				    grid: {
				        top: 80,
				        containLabel: true
				    },
				    xAxis: [{
				        type: 'value',
				        min: min,
				        max: max,
//				        interval: interval,
				        axisLabel:{  
				            interval:0,  
				            //rotate:0,//倾斜度 -90 至 90 默认为0  
				            
				        },
				    }],
				    grid: { 
				    	// 控制图的大小，调整下面这些值就可以，参考https://www.cnblogs.com/liubeimeng/p/4980067.html
			            x: 30,
			            x2: 30,
			            y2: 50,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
			         },
				    yAxis: [{
				        type: 'value',
				    }],
				    series: [{
				        name: 'height',
				        type:'custom',
				        renderItem:this.renderItemFn,
				        label: {
				            normal: {
				                show: true,
				                position: 'insideTop'
				            }
				        },
				        encode: {
				            x: [0, 1],
				            y: 2,
				            tooltip: 2,
				            label: 2
				        },
				        data: this.data
				    }]
			    });

	    	},
	    	changeHist(){
	    		//触发select的值更换直方图数据
	    		let _selfData=this;
	    		$(_selfData.newResData.details).each(function(i, v){
	              	$(v.details).each(function(i_son, v_son){	              
		              	if(v_son.type==1){
							_selfData.hisColumns=v_son.details.columns;		
							//接收直方图数据
							_selfData.histogram_data=v_son.details.hist_data[_selfData.selected];
							_selfData.drawHistogram(_selfData.histogram_data);
							
		              	};
		             
		            });
		        });
	    	},
	    	
		}
      
	}
</script>
<style  lang="css">
	@import "../../assets/css/reporter.css"
</style>